<template>
  <div class="banner-swiper" :style="{ marginTop: `${mTOP}px` }">
    <div
      v-if="styleConfig === 0 || styleConfig === 2"
      class="banner-swiper__container"
      :style="containerStyles"
    >
      <div class="banner-swiper__banner" v-if="styleConfig === 0">
        <img
          v-if="imgSrc[0]?.img"
          :src="imgSrc[0].img"
          alt="Banner image"
          :style="imageStyles(0)"
        />
        <div v-else class="banner-swiper__empty-box" :style="imageStyles(0)">
          <img
            class="banner-swiper__placeholder"
            src="../../assets/images/shan.png"
          />
        </div>
      </div>

      <div class="banner-swiper__banner" v-else>
        <div class="banner-swiper__row">
          <div
            class="banner-swiper__empty-box banner-swiper__empty-box--style3"
            :style="sideImageStyles(1)"
          >
            <img
              v-if="imgSrc[1]?.img"
              :src="imgSrc[1].img"
              alt="Side image"
              :style="sideImageStyles(1)"
            />
          </div>
          <div
            class="banner-swiper__empty-box banner-swiper__empty-box--style3 banner-swiper__empty-box--active"
            :style="centerImageStyles"
          >
            <img
              v-if="imgSrc[0]?.img"
              :src="imgSrc[0].img"
              alt="Center image"
              :style="centerImageStyles"
            />
            <img
              v-else
              class="banner-swiper__placeholder"
              src="@/assets/images/shan.png"
            />
          </div>
          <div
            class="banner-swiper__empty-box banner-swiper__empty-box--style3"
            :style="sideImageStyles(2)"
          >
            <img
              v-if="imgSrc[2]?.img"
              :src="imgSrc[2].img"
              alt="Side image"
              :style="sideImageStyles(2)"
            />
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <div class="banner-swiper__bg" :style="{ background: bgColor }"></div>
      <div
        class="banner-swiper__banner"
        :class="{ 'banner-swiper__banner--active': styleConfig === 1 }"
        :style="bannerStyles"
      >
        <img
          v-if="imgSrc[0]?.img"
          :src="imgSrc[0].img"
          :style="imageStyles(0)"
          alt="Banner image"
        />
        <div v-else class="banner-swiper__empty-box" :style="imageStyles(0)">
          <img
            class="banner-swiper__placeholder"
            src="@/assets/images/shan.png"
          />
        </div>
      </div>
    </div>

    <div>
      <div
        class="banner-swiper__dot banner-swiper__dot--line"
        v-if="docStyle === 2"
        :style="dotContainerStyles"
      >
        <div
          class="banner-swiper__line-dot"
          :style="{ background: dotBgColor }"
        >
          <div
            class="banner-swiper__line-item"
            :style="{ background: dotColor }"
          ></div>
        </div>
      </div>

      <div
        class="banner-swiper__dot"
        :class="{
          'banner-swiper__dot--style1': docStyle === 1,
          'banner-swiper__dot--style2': docStyle === 3,
        }"
        v-else
        :style="dotContainerStyles"
      >
        <div
          class="banner-swiper__dot-item"
          :class="{ 'banner-swiper__dot-item--active': docStyle === 1 }"
          :style="{ background: dotColor }"
        ></div>
        <div
          class="banner-swiper__dot-item"
          v-for="(_, index) in 2"
          :key="index"
          :style="{ background: dotBgColor }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onUnmounted } from "vue";
import type {
  BannerSwiperProps,
  BannerSwiperEmits,
  BannerSwiperInstance,
} from "./types";

// 添加组件分类元信息
defineOptions({
  meta: {
    type: 0, // 0=基础组件
    cname: "轮播图",
  },
});

const props = withDefaults(defineProps<BannerSwiperProps>(), {
  colorStyle: () => ({ theme: "#E93323" }),
});

const emit = defineEmits<BannerSwiperEmits>();

// 计算属性
const styleConfig = computed(() => props.config.styleConfig.tabVal || 0);
const prConfig = computed(() => props.config.prConfig.val);
const topConfig = computed(() => props.config.topConfig.val);
const bottomConfig = computed(() => props.config.bottomConfig.val);
const bgColor = computed(() => props.config.bgColor.color[0].item);
const filletImg = computed(() => props.config.filletImg.type);
const filletValImg = computed(() => props.config.filletImg.val);
const valListImg = computed(() => props.config.filletImg.valList);
const mTOP = computed(() => props.config.mbConfig.val);
const docPosition = computed(() => props.config.docPosition.tabVal);
const toneConfig = computed(() => props.config.toneConfig.tabVal);
const dotColor = computed(() =>
  toneConfig.value
    ? props.config.dotColor.color[0].item
    : props.colorStyle?.theme || "#E93323"
);
const dotBgColor = computed(() =>
  toneConfig.value ? props.config.dotBgColor.color[0].item : "#DDDDDD"
);
const imgConfig = computed(() => props.config.imgConfig.val);
const imgSrc = computed(() => props.config.swiperConfig.list);
const docStyle = computed(() => props.config.docConfig.tabVal);

// 样式计算
const containerStyles = computed(() => ({
  paddingLeft: `${prConfig.value}px`,
  paddingRight: `${prConfig.value}px`,
  paddingTop: `${topConfig.value}px`,
  paddingBottom: `${bottomConfig.value}px`,
  backgroundColor: bgColor.value,
}));

const bannerStyles = computed(() => ({
  paddingLeft: `${prConfig.value}px`,
  paddingRight: `${prConfig.value}px`,
  paddingTop: `${topConfig.value}px`,
  paddingBottom: `${bottomConfig.value}px`,
}));

const dotContainerStyles = computed(() => {
  const paddingX =
    styleConfig.value === 2
      ? prConfig.value + imgConfig.value * 2 + 26
      : prConfig.value + 10;

  return {
    paddingLeft: `${paddingX}px`,
    paddingRight: `${paddingX}px`,
    paddingBottom: `${bottomConfig.value + 10}px`,
    justifyContent:
      docPosition.value === 1
        ? "center"
        : docPosition.value === 2
        ? "flex-end"
        : "flex-start",
  };
});

const imageStyles = (index: number) => {
  if (filletImg.value) {
    return {
      borderRadius: `
        ${valListImg.value[0].val}px 
        ${valListImg.value[1].val}px 
        ${valListImg.value[3].val}px 
        ${valListImg.value[2].val}px
      `,
    };
  }
  return { borderRadius: `${filletValImg.value}px` };
};

const sideImageStyles = (index: number) => {
  if (index === 1) {
    return filletImg.value
      ? {
          borderRadius: `0 ${valListImg.value[1].val}px ${valListImg.value[3].val}px 0`,
        }
      : { borderRadius: `0 ${filletValImg.value}px ${filletValImg.value}px 0` };
  } else {
    return filletImg.value
      ? {
          borderRadius: `${valListImg.value[1].val}px 0 0 ${valListImg.value[3].val}px`,
        }
      : { borderRadius: `${filletValImg.value}px 0 0 ${filletValImg.value}px` };
  }
};

const centerImageStyles = computed(() => {
  if (filletImg.value) {
    return {
      borderRadius: `
        ${valListImg.value[0].val}px 
        ${valListImg.value[1].val}px 
        ${valListImg.value[3].val}px 
        ${valListImg.value[2].val}px
      `,
      marginLeft: `${imgConfig.value}px`,
      marginRight: `${imgConfig.value}px`,
    };
  }
  return {
    borderRadius: `${filletValImg.value}px`,
    marginLeft: `${imgConfig.value}px`,
    marginRight: `${imgConfig.value}px`,
  };
});

// 组件方法
const refreshConfig = () => {
  // 实现配置刷新逻辑
};

// 资源清理
onUnmounted(() => {
  // 清理定时器、事件监听等资源
});

// 暴露组件实例方法
defineExpose<BannerSwiperInstance>({
  refreshConfig,
});
</script>

<style lang="scss" scoped>
.banner-swiper {
  position: relative;
  width: auto;

  &__container {
    width: 100%;
  }

  &__bg {
    width: 100%;
    height: 96px;
  }

  &__banner {
    width: 100%;
    margin-top: 0;

    &--active {
      margin-top: -96px;
    }

    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }

  &__row {
    display: flex;
    align-items: center;
  }

  &__empty-box {
    height: 170px;
    background-color: #f3f9ff;
    display: flex;
    align-items: center;
    justify-content: center;

    &--style3 {
      width: 16px;
      height: 134px;
      border-radius: 0;

      img {
        width: 16px;
        height: 100%;
      }
    }

    &--active {
      flex: 1;
      height: 170px;
    }
  }

  &__placeholder {
    width: 65px;
    height: 50px;
  }

  &__dot {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;

    &--line {
      padding-bottom: 10px;
    }

    &--style1 {
      .banner-swiper__dot-item {
        width: 5px;
        height: 5px;

        &--active {
          width: 9px;
          height: 5px;
          border-radius: 4px;
        }
      }
    }

    &--style2 {
      .banner-swiper__dot-item {
        width: 10px;
        height: 3px;
        border-radius: 4px;
      }
    }
  }

  &__dot-item {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 0 3px;
  }

  &__line-dot {
    width: 30px;
    height: 3px;
    border-radius: 4px;
  }

  &__line-item {
    width: 10px;
    height: 100%;
    border-radius: 4px;
  }
}
</style>
